<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      ok-text="保存"
      @ok="submitFunc"
    >
      <BasicForm @register="registerForm"> </BasicForm>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
  import { Button } from 'ant-design-vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { CustomModalTypeEnum, DataStatusEnum } from '@/enums/publicEnum';
  import { boCooperationTypeInsertOrUpdate } from '@/api/platform/fieldValueManage/CooperationTypes';
  import { CooperationType } from '@/api/platform/fieldValueManage/CooperationTypes/type';

  const title = ref('');
  const type = ref<CustomModalTypeEnum>(CustomModalTypeEnum.Add);
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const typeMap = {
    [CustomModalTypeEnum.Add]: '新增供需合作分类',
    [CustomModalTypeEnum.Edit]: '编辑供需合作分类',
  };

  const [register, { closeModal }] = useModalInner(
    async (data: { type: CustomModalTypeEnum; row: CooperationType }) => {
      type.value = data.type;
      if (data.type === CustomModalTypeEnum.Edit) {
        setFieldsValue(data.row);
      } else {
        setFieldsValue({
          enabled: DataStatusEnum.Normal,
        });
      }
      title.value = typeMap[data.type];
    },
  );

  const [registerForm, { validate, setProps, setFieldsValue, updateSchema }] = useForm({
    schemas: [
      {
        field: 'id',
        component: 'Input',
        label: '字段主键',
        show: false,
      },

      {
        field: 'cooperationTypeName',
        label: '类目名称',
        component: 'Input',
        required: true,
      },
      {
        field: 'sort',
        label: '类目排序',
        required: true,
        helpMessage: '排序越小越靠前',
        componentProps: {
          type: 'number',
        },
        component: 'Input',
      },

      {
        field: 'enabled',
        label: '启用状态',
        component: 'Switch',
        componentProps: {
          checkedValue: DataStatusEnum.Normal,
          unCheckedValue: DataStatusEnum.Disable,
        },
      },
    ],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 18 },
    showActionButtonGroup: false,
  });
  const submitFunc = async () => {
    const data: CooperationType = await validate();
    setProps({
      submitButtonOptions: {
        loading: true,
      },
    });
    try {
      await boCooperationTypeInsertOrUpdate(data);
      setProps({
        submitButtonOptions: {
          loading: false,
        },
      });
      createMessage.success('提交成功！');
      emit('reload');
      closeModal();
    } catch (error) {
      setProps({
        submitButtonOptions: {
          loading: false,
        },
      });
    }
  };
</script>

<style lang="less" scoped></style>
